<script setup lang="ts">
import type { TemplateRoute, Route } from '@/types/template'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTemplateRouteInfoApi } from '@/services/template'
import PopupRouteInfo from './components/PopupRouteInfo.vue'
import { useVisitorStore } from '@/stores/modules/visitor'

const WEEKS = ref(['日', '一', '二', '三', '四', '五', '六'])
// 当前月份
const currentMonth = ref(0)
// 切换月份
const onChangeMonth = (index: number) => {
  currentMonth.value = index
}

//接收页面参数
const props = defineProps<{ id: number }>()

// 当前发班线路
const currentRoute = ref<Route>()
const onChangeDate = (route: Route) => {
  if (route.id != null) {
    currentRoute.value = route
  }
}
// 获取第一个可选的发班线路ID
const getFirstRoute = (info: TemplateRoute) => {
  const monthList = info.routes[0].list
  for (let i = 0; i < monthList.length; i++) {
    for (let j = 0; j < monthList[i].length; j++) {
      if (monthList[i][j].id != null) {
        currentRoute.value = monthList[i][j]
        return false
      }
    }
  }
}

// 成人人数
const adultNum = ref(1)
// 儿童人数
const childNum = ref(0)

// 获取线路明细
const template = ref<TemplateRoute>()
const getTemplateRouteInfoData = async () => {
  const res = await getTemplateRouteInfoApi(props.id)
  template.value = res.data
  getFirstRoute(template.value)
}

const monthDesc = (month: string) => {
  let m = month.split('-')
  return parseInt(m[1], 10) + '月'
}
const personDesc = (personNum: number) => {
  return personNum > 10 ? '充足' : personNum + '人'
}
// 继续预定
const onNext = () => {
  uni.navigateTo({
    url: `/pages/template/chooseVisitor?id=${currentRoute.value?.id}&adultNum=${adultNum.value}&childNum=${childNum.value}`,
  })
}

// 页面加载
onLoad(async () => {
  getTemplateRouteInfoData()
  const visitorStore = useVisitorStore()
  visitorStore.changeVisitors([])
})
</script>

<template>
  <view class="title-bar">
    <view class="title">{{ template?.name }}</view>
  </view>

  <!-- 日历 -->
  <view>
    <view class="month-caption">
      <view
        class="item"
        :class="{ 'current-month': index == currentMonth }"
        v-for="(months, index) in template?.routes"
        :key="months.month"
        @click="onChangeMonth(index)"
      >
        {{ monthDesc(months.month) }}
      </view>
    </view>
    <view class="week week-caption">
      <view class="item" v-for="it in WEEKS" :key="it">{{ it }}</view>
    </view>
    <view
      v-for="(months, index) in template?.routes"
      :key="months.month"
      :class="{ hidden: index != currentMonth }"
    >
      <view class="week" v-for="(weeks, index) in months.list" :key="index">
        <view
          class="item date-item"
          v-for="date in weeks"
          :key="date.date"
          :class="{ current: date.id != null && date.id == currentRoute?.id }"
          @click="onChangeDate(date)"
        >
          <view class="date" v-if="date.date > 0">{{ date.date }}</view>
          <template v-if="date.id != null">
            <view>{{ personDesc(date.person_num) }}</view>
            <view>￥{{ date.adult_market_price }}</view>
          </template>
        </view>
      </view>
    </view>
  </view>

  <view class="start-info">
    <text class="hx-font hx-date"></text>
    <text class="date">{{ currentRoute?.start }}</text>
    出发 至
    <text class="date">{{ currentRoute?.back }}</text>
    返回
  </view>

  <view class="price-bar">
    <view>成人价</view>
    <view class="right">
      <view class="price">￥{{ currentRoute?.adult_market_price }}元/人</view>
      <uni-number-box :min="1" :max="20" v-model="adultNum"></uni-number-box>
    </view>
  </view>
  <view class="price-bar" v-if="currentRoute != null && currentRoute?.child_market_price > 0">
    <view>儿童价</view>
    <view class="right">
      <view class="price">￥{{ currentRoute?.child_market_price }}元/人</view>
      <uni-number-box :min="0" :max="20" v-model="childNum"></uni-number-box>
    </view>
  </view>
  <view class="single-price">
    <view>
      <text class="hx-font hx-idea"></text>
      单人报名需补交房差{{ currentRoute?.single_price }}元
    </view>
    <view>如需拼房请下单联系客服，拼房成功可退单房差</view>
  </view>
  <up-gap height="100" />

  <PopupRouteInfo
    :currentRoute="currentRoute"
    :adultNum="adultNum"
    :childNum="childNum"
    btnText="继续预定"
    @next="onNext()"
  ></PopupRouteInfo>
</template>

<style lang="scss" scoped>
@import './styles/route.scss';
</style>
